<template>
  <div class="OrderDetailsMessage info-content" @click="handleOpenOrderMenuTab">
    <div class="tip">{{$t('im.imChat.components.messageBox.chattingRecords.components.orderDetailsMessage.des1')}}</div>
    <div class="info" v-if="goodsInfoList.length > 0">
      <img class="img" :src="productImage" alt="" />
      <div class="price-box">
        <span class="name">{{ firstGoodsInfo.name }}</span>
        <span class="price">
          <i18n path="im.imChat.components.messageBox.chattingRecords.components.orderDetailsMessage.des2">
            <span place="data1" class="c26">{{ goodsInfoList.length }}</span>
          </i18n>
          <span class="c26">{{ info.payAmount }}</span>
        </span>
      </div>
    </div>
    <div class="number">{{$t('common.fields.orderSerialNumber.displayName')}}：{{ info.orderNum }}</div>
    <div class="createTime">{{$t('common.fields.createTime.displayName')}}：{{ formatDate(info.createTime) }}</div>
  </div>
</template>

<script>
import moment from 'moment';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum';
import { getRootWindow } from '@src/util/dom';
import { getOssUrl } from '@src/util/assets'
const imgDefault = getOssUrl('/goodsDefault.png');

export default {
  name: 'order-details-message',
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    info() {
      return this.item?.messageContent?.customExts ?? {};
    },
    goodsInfoList() {
      return this.info?.goodsInfoList ?? [];
    },
    firstGoodsInfo() {
      return this.goodsInfoList[0];
    },
    isOpenServiceMall() {
      const RootWindow = getRootWindow(window);
      return RootWindow?.grayAuth?.SERVICE_MALL ?? false;
    },
    productImage(){
      return this.firstGoodsInfo.image || imgDefault
    }
  },
  methods: {
    formatDate(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss');
    },
    handleOpenOrderMenuTab() {
      let id = this.info?.orderId;
      let orderNum = this.info?.orderNum;
      if (!id) return;

      let fromId = window.frameElement.getAttribute('id');
      if (this.isOpenServiceMall) {
        openAccurateTab({
          type: PageRoutesTypeEnum.PageOrderDetailV2,
          key: id,
          // titleKey: orderNum,
          params: `id=${id}`,
          fromId,
        });
      } else {
        openAccurateTab({
          type: PageRoutesTypeEnum.PageOrderDetail,
          key: id,
          titleKey: orderNum,
          params: `id=${id}`,
          fromId,
        });
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.OrderDetailsMessage {
  width: 300px;
  background: #ffffff;
  box-sizing: border-box;
  cursor: pointer;
  .tip {
    font-size: 17px;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
  }
  .info {
    width: 100%;
    height: 80px;
    background: #f5f5f5;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 10px;
    .c26 {
      color: #262626;
    }
    .img {
      width: 56px;
      height: 56px;
      border-radius: 8px;
    }
    .price-box {
      margin-left: 12px;
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name {
        @include text-ellipsis;
        font-weight: bold;
      }
      .price {
        @include text-ellipsis;
        font-size: 12px;
      }
    }
  }
  .number,
  .createTime {
    font-size: 12px;
    line-height: 18px;
    color: #8c8c8c;
    line-height: 18px;
    @include text-ellipsis;
    margin-top: 2px;
  }
}
</style>
